<script setup lang="ts">
import { ref } from 'vue'

// 定义响应式数据
const inputText = ref('')

// 定义复杂响应式数据
const student = ref({
  age: 18,
  name: '张三',
})

// 响应式数据需要使用‘.value’才能 修改/获取 值
// 但在html中使用模板语法访问响应式数据时则无需使用‘.value’，如：
// <h1>{{ inputText }}</h1>
console.log(inputText.value) // 打印‘inputText’的值
console.log(student.value.age) // 打印‘student’的‘age’的值
console.log(student.value.name) // 打印‘student’的‘name’的值

// 箭头函数，清空输入框的值
const clearInput = () => {
  inputText.value = '' // 将inputText的值设置为空字符串就可以清空输入框的值
}
</script>

<template>
  <div>
    <!-- 输入框，v-model将input输入框的值和inputText的值绑定在一起 -->
    <!-- 当input输入框的值发生变化时，inputText的值也会发生变化 -->
    <Input v-model="inputText"></Input>

    <!-- 使用模板语法访问响应式数据，不需要使用‘.value’ -->
    <h1>{{ inputText }}</h1>

    <!-- 按钮，点击按钮时，调用clearInput函数，清空输入框的值 -->
    <!-- 使用[@+事件名]来绑定事件 -->
    <!-- 这里绑定‘button’的‘click’事件为clearInput函数，也就是点击‘button’时会执行‘clearInput’函数 -->
    <button @click="clearInput">清空输入框的值</button>
  </div>
</template>

<style scoped lang="less"></style>
